<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatMallLinkComponent/>
    </div>

    <!-- 页面主体 -->
    <div class="main-container">
      <div class="nav-breadcrumb">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="font-size: 16px;">
          <el-breadcrumb-item :to="{ path: '/mall' }">商城</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/mall' }"><span v-text="commodityDetails.categoryName">Xxx</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item><span v-text="commodityDetails.title">Xxx</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="pro-intro g-b-f g-b-r10 g-flex">
        <div id="magnifier">
          <el-image class="image" :src="commodityDetails.coverUrl" :alt="commodityDetails.title"></el-image>
        </div>
        <div class="right">
          <div class="main-intro">
            <h1 class="g-font22 g-m10-b">{{ commodityDetails.title }}</h1>
            <div class="g-c-9 g-font14 g-m15-b">{{ commodityDetails.keywords }}</div>
            <div class="g-flex g-flex-cns">
              <div class="price g-font30 g-m10-b">{{ commodityDetails.salePrice }}</div>
            </div>
            <div class="g-font16 g-m10-bt">数量</div>
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </div>
          <div id="order-car">加入购物车</div>
          <div id="order-submit">立即购买</div>
          <ul class="extra-info g-flex-item g-flex g-wrap g-c-7">
            <li class="ncui-icons">全场包邮</li>
            <li class="ncui-icons">30天退换</li>
            <li class="ncui-icons">正品保证</li>
            <li class="ncui-icons">假一赔十</li>
          </ul>
        </div>
      </div>
      <div class="pro-details g-flex g-flex-bet">
        <div>
          <div class="g-flex so-box g-b-f">
            <div class="ncui-iconsbd">
              <i class="el-icon-search"></i>
            </div>
            <input type="text" class="g-bnt0 so-input" value="" id="wd" autocomplete="off" placeholder="输入关键字">
            <div class="so-bnt g-c-f g-center" id="so">搜索</div>
          </div>

          <ul class="g-b-f g-b-r10" v-for="item in leftCommdityList">
            <li>
              <a :href="'/mall/commodity'" target="_blank" class="corr-img">
                <el-image class="image" :src="item.coverUrl" :alt="item.title"></el-image>
              </a>
              <h3><a :href="'/mall/commodity'" target="_blank" cg-txtcutlass="">{{ item.title }}</a></h3>
              <div class="corr-price g-font18">{{ item.price }}</div>

            </li>
          </ul>
        </div>

        <div class="commodityTabs">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="商品详情" name="commodityDetailTab">
              <div class="content pro-details-cont g-b-f g-b-r10">
                <div v-html="commodityDetails.detail"></div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="commentLabelName" name="commentTab">
              <div class="content pro-details-cont g-b-f g-b-r10">
                <div class="comment-percent">
                  <strong class="percent-tit">好评度</strong>
                  <div class="percent-con">{{ commodityDetails.positiveCommentCount }}<span>%</span>
                  </div>
                </div>
                <div v-for="commentItem in commentList">
                  <div class="comment-item">
                    <div class="user-column">
                      <div class="user-info">{{ commentItem.commentUserName }}</div>
                    </div>
                    <div class="comment-column J-comment-column">
                      <el-rate
                          v-model="commentItem.commentRate"
                          disabled
                          show-score
                          text-color="#ff9900"
                          score-template="{value}">
                      </el-rate>
                      <p class="comment-con">{{ commentItem.commentContent }}</p>
                      <div class="J-pic-view-wrap clearfix" data-rotation="0">
                      </div>
                      <div class="comment-message">
                        <div class="order-info">
                          <span>{{ commentItem.orderName }}</span>
                          <span></span>
                          <span></span>
                          <span>{{ commentItem.commentTime }}</span>
                          <span>{{ commentItem.orderAdd }}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </el-tab-pane>
          </el-tabs>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloatMallLinkComponent from '@/components/FloatMallLinkComponentView.vue';

export default {
  components: {
    FloatMallLinkComponent
  },
  data() {
    return {
      activeName: 'commodityDetailTab',
      pageTitle: '',
      defaultSearchKeywords: '',
      searchKeywords: '',
      searchSuggestKeywords: [],
      commentLabelName: '商品评价',
      num: 1,
      commodityDetails: {
        id: 5,
        categoryId: 11,
        categoryName: "茶壶",
        barCode: "11010100111010",
        title: "陶瓷旅行茶具 便携式快客杯功夫茶具 一壶二杯（泡茶容量约170ml左右）",
        brief: "一壶二杯 简约礼盒装",
        coverUrl: "/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg",
        salePrice: 106,
        keywords: "陶瓷,旅行茶具,便携,功夫茶具",
        sort: 0,
        isRecommend: 1,
        isPutOn: 0,
        salesCount: 0,
        commentCount: 0,
        positiveCommentCount: 100,
        negativeCommentCount: 0,
        gmtCreate: "2023-06-01 08:00.00",
        gmtModified: "2023-06-01 08:00.00",
        detail: '<p> </p><p>云南普洱竹筒茶，精品选料发酵，手工烘烤填料制作，老料压制；</p><p>昆明纯干仓存放，口感醇厚，回甘生津好，具有很好的收藏价值；</p><p>数量不多，茶友们千万不要错过。</p><p> </p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_45160E71BC4449C11F194092B908C2DE.jpg" src="https://img.nichaw.cn/photo/202010/20201007_45160E71BC4449C11F194092B908C2DE.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_46B2F1AA260241A767D2775277ACF62B.jpg" src="https://img.nichaw.cn/photo/202010/20201007_46B2F1AA260241A767D2775277ACF62B.jpg?x-bce-process=style/i750"><br>因竹筒系自然生长，所以稍存在一定偏差，毛重约在600至800克左右。</p><p><span style="font-weight: bold;">一筒茶叶净重250克</span></p><p><span style="color: #333333; font-size: 16px;">鲜竹明火烤制过程，竹子外层会偶尔有糊的现象，竹皮剔除后，竹膜会依附在茶品上，这属于手工正常现象。</span></p><p> </p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_BEC9F36C72119BC0FAD94A0F8FD2A20E.jpg" src="https://img.nichaw.cn/photo/202010/20201007_BEC9F36C72119BC0FAD94A0F8FD2A20E.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_167F997E5FF20AF2C70985903AE9DE4F.jpg" src="https://img.nichaw.cn/photo/202010/20201007_167F997E5FF20AF2C70985903AE9DE4F.jpg?x-bce-process=style/i750"><br>竹筒茶为圆柱体形，外形柱体， 色绿润显毫，冲泡后既有茶香、又有竹子清香，清凉解渴。</p><p>关于竹筒茶的取茶方法，通常有两种方法，就是把竹子劈开，第二种就是敲击震动，让茶跟竹子自己剥离开，然后从竹子里滑出来！</p><p> </p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_16C2714B2A67B758A2E2AFA87C555D96.jpg" src="https://img.nichaw.cn/photo/202010/20201007_16C2714B2A67B758A2E2AFA87C555D96.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_D4DC25BEA2A56EDE5F4D36B91EF6E791.jpg" src="https://img.nichaw.cn/photo/202010/20201007_D4DC25BEA2A56EDE5F4D36B91EF6E791.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_35B4F90DC45853CDC814E77ECA7EB4F0.jpg" src="https://img.nichaw.cn/photo/202010/20201007_35B4F90DC45853CDC814E77ECA7EB4F0.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_2D9F658DEF3D3D0FC2ED6E033550DCA0.jpg" src="https://img.nichaw.cn/photo/202010/20201007_2D9F658DEF3D3D0FC2ED6E033550DCA0.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_F7A5E7DF295B091CB32019B48CF2D3E5.jpg" src="https://img.nichaw.cn/photo/202010/20201007_F7A5E7DF295B091CB32019B48CF2D3E5.jpg?x-bce-process=style/i750"><br>汤色纯正，酒红透亮，非常的诱人，口感醇厚顺滑，入口就有一种陈香味！是茶友们值得一尝的好茶。值得收藏。</p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_E001D0FA37FF1D7BF3FDE17F0C4BD7F3.jpg" src="https://img.nichaw.cn/photo/202010/20201007_E001D0FA37FF1D7BF3FDE17F0C4BD7F3.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_43002A7FD5D4D44AD5656F9E5F470DB1.jpg" src="https://img.nichaw.cn/photo/202010/20201007_43002A7FD5D4D44AD5656F9E5F470DB1.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_3F20D8C0893453E9E3CE5D9F3FCE2FCF.jpg" src="https://img.nichaw.cn/photo/202010/20201007_3F20D8C0893453E9E3CE5D9F3FCE2FCF.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_5D17F9210E41413DCB635BD362601A6C.jpg" src="https://img.nichaw.cn/photo/202010/20201007_5D17F9210E41413DCB635BD362601A6C.jpg?x-bce-process=style/i750"><img style="margin-bottom: 10px;" src="https://tuku.nichaw.cn/202207/21/a25e1a15482918115c4444aaf8056867.jpg?x-bce-process=style/artwork"><img src="https://img.nichaw.cn/fuwu/goumaixuzhi_002.jpg?x-bce-process=style/i750"></p><div style="margin: 15px 0;display: flex;align-items: center;justify-content: center;font-size:14px;"><div style="display: flex;justify-content: center;align-items: center;margin-right:10px;"><img src="https://img.nichaw.cn/img/gongan.png" ignore="" style="width: 22px;margin-right:5px;"><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61019002001673" target="_blank">公安网备</a></div><div style="display: flex;justify-content: center;align-items: center;margin-right:10px;"><img src="https://img.nichaw.cn/img/permit/gszz_ico2.png" ignore="" style="width: 22px;margin-right:5px;"><a href="https://img.nichaw.cn/fuwu/nc_zz.jpg?x-bce-process=style/i750" target="_blank">工商执照</a></div><div style="display: flex;justify-content: center;align-items: center;"><img src="https://img.nichaw.cn/img/permit/spzz_ico2.png" ignore="" style="width: 22px;margin-right:5px;"><a href="https://img.nichaw.cn/fuwu/nc_zz.jpg?x-bce-process=style/i750" target="_blank">食品许可证</a></div></div>\t\t\t\t',
      },
      leftCommdityList: [
        {
          id: 1,
          coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
          title: "2023年安徽祁门红茶 特二级浓香型祁红香螺茶 300克",
          intro: "大份量 味香浓",
          price: 555
        },
        {
          id: 2,
          coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
          title: "2023年安徽祁门红茶 特二级浓香型祁红香螺茶 300克",
          intro: "大份量 味香浓",
          price: 555
        },
        {
          id: 3,
          coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
          title: "2023年安徽祁门红茶 特二级浓香型祁红香螺茶 300克",
          intro: "大份量 味香浓",
          price: 555
        },
        {
          id: 4,
          coverUrl: '/images/20230507_B84B184D30812115CE5D9E111C3F63F7.jpg',
          title: "2023年安徽祁门红茶 特二级浓香型祁红香螺茶 300克",
          intro: "大份量 味香浓",
          price: 555
        }
      ],
      commentList: [
        {
          id: 1,
          commentContent: '鲜奶的口感是常温奶比不上的～真的很好喝哈哈哈 直接拿来做拿铁很合适 450ml喝掉一半后加入冰块 燕麦奶 咖啡 方便快捷！',
          commentUserId: 1,
          commentUserName: "张三",
          commentRate: 5,
          commentTime: "2023-07-10 14:39",
          orderName: "2023年安徽祁门红茶 特二级浓香型祁红香螺茶 300克",
          orderAdd: "湖南"

        },
        {
          id: 2,
          commentContent: '鲜奶的口感是常温奶比不上的～真的很好喝哈哈哈 直接拿来做拿铁很合适 450ml喝掉一半后加入冰块 燕麦奶 咖啡 方便快捷！',
          commentUserId: 1,
          commentUserName: "张三",
          commentRate: 5,
          commentTime: "2023-07-10 14:39",
          orderName: "2023年安徽祁门红茶 特二级浓香型祁红香螺茶 300克",
          orderAdd: "湖南"
        },
        {
          id: 3,
          commentContent: '鲜奶的口感是常温奶比不上的～真的很好喝哈哈哈 直接拿来做拿铁很合适 450ml喝掉一半后加入冰块 燕麦奶 咖啡 方便快捷！',
          commentUserId: 1,
          commentUserName: "张三",
          commentRate: 5,
          commentTime: "2023-07-10 14:39",
          orderName: "2023年安徽祁门红茶 特二级浓香型祁红香螺茶 300克",
          orderAdd: "湖南"
        },
        {
          id: 4,
          commentContent: '鲜奶的口感是常温奶比不上的～真的很好喝哈哈哈 直接拿来做拿铁很合适 450ml喝掉一半后加入冰块 燕麦奶 咖啡 方便快捷！',
          commentUserId: 1,
          commentUserName: "张三",
          commentRate: 5,
          commentTime: "2023-07-10 14:39",
          orderName: "2023年安徽祁门红茶 特二级浓香型祁红香螺茶 300克",
          orderAdd: "湖南"
        }
      ]
    }
  },
  methods: {
    loadPageTitle() {
      this.pageTitle = '茶叶商城 - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '大红袍';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadSearchSuggestKeywords() {
      let searchSuggestKeywords = ['车载杯', '煮茶壶', '铁观音', '五宝茶', '小青柑', '苦荞茶'];
      this.searchSuggestKeywords = searchSuggestKeywords;
    },
    search() {
      let keywords = this.searchKeywords;
      if (!keywords) {
        keywords = this.defaultSearchKeywords;
      }
      this.$message({
        message: '您正在尝试搜索【' + keywords + '】，抱歉，此功能尚未实现……',
        type: 'warning'
      });
    },
    handleChange(value) {
      console.log(value);
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
      console.log(tab, event);
    },
    getCommodityDetail() {
      let resData = {
        id: 5,
        categoryId: 11,
        categoryName: "茶壶",
        barCode: "11010100111010",
        title: "陶瓷旅行茶具 便携式快客杯功夫茶具 一壶二杯（泡茶容量约170ml左右）",
        brief: "一壶二杯 简约礼盒装",
        coverUrl: "/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg",
        salePrice: 106,
        keywords: "陶瓷,旅行茶具,便携,功夫茶具",
        sort: 0,
        isRecommend: 1,
        isPutOn: 0,
        salesCount: 0,
        commentCount: 0,
        positiveCommentCount: 100,
        negativeCommentCount: 0,
        gmtCreate: "2023-06-01 08:00.00",
        gmtModified: "2023-06-01 08:00.00",
        detail: '<p> </p><p>云南普洱竹筒茶，精品选料发酵，手工烘烤填料制作，老料压制；</p><p>昆明纯干仓存放，口感醇厚，回甘生津好，具有很好的收藏价值；</p><p>数量不多，茶友们千万不要错过。</p><p> </p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_45160E71BC4449C11F194092B908C2DE.jpg" src="https://img.nichaw.cn/photo/202010/20201007_45160E71BC4449C11F194092B908C2DE.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_46B2F1AA260241A767D2775277ACF62B.jpg" src="https://img.nichaw.cn/photo/202010/20201007_46B2F1AA260241A767D2775277ACF62B.jpg?x-bce-process=style/i750"><br>因竹筒系自然生长，所以稍存在一定偏差，毛重约在600至800克左右。</p><p><span style="font-weight: bold;">一筒茶叶净重250克</span></p><p><span style="color: #333333; font-size: 16px;">鲜竹明火烤制过程，竹子外层会偶尔有糊的现象，竹皮剔除后，竹膜会依附在茶品上，这属于手工正常现象。</span></p><p> </p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_BEC9F36C72119BC0FAD94A0F8FD2A20E.jpg" src="https://img.nichaw.cn/photo/202010/20201007_BEC9F36C72119BC0FAD94A0F8FD2A20E.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_167F997E5FF20AF2C70985903AE9DE4F.jpg" src="https://img.nichaw.cn/photo/202010/20201007_167F997E5FF20AF2C70985903AE9DE4F.jpg?x-bce-process=style/i750"><br>竹筒茶为圆柱体形，外形柱体， 色绿润显毫，冲泡后既有茶香、又有竹子清香，清凉解渴。</p><p>关于竹筒茶的取茶方法，通常有两种方法，就是把竹子劈开，第二种就是敲击震动，让茶跟竹子自己剥离开，然后从竹子里滑出来！</p><p> </p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_16C2714B2A67B758A2E2AFA87C555D96.jpg" src="https://img.nichaw.cn/photo/202010/20201007_16C2714B2A67B758A2E2AFA87C555D96.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_D4DC25BEA2A56EDE5F4D36B91EF6E791.jpg" src="https://img.nichaw.cn/photo/202010/20201007_D4DC25BEA2A56EDE5F4D36B91EF6E791.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_35B4F90DC45853CDC814E77ECA7EB4F0.jpg" src="https://img.nichaw.cn/photo/202010/20201007_35B4F90DC45853CDC814E77ECA7EB4F0.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_2D9F658DEF3D3D0FC2ED6E033550DCA0.jpg" src="https://img.nichaw.cn/photo/202010/20201007_2D9F658DEF3D3D0FC2ED6E033550DCA0.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_F7A5E7DF295B091CB32019B48CF2D3E5.jpg" src="https://img.nichaw.cn/photo/202010/20201007_F7A5E7DF295B091CB32019B48CF2D3E5.jpg?x-bce-process=style/i750"><br>汤色纯正，酒红透亮，非常的诱人，口感醇厚顺滑，入口就有一种陈香味！是茶友们值得一尝的好茶。值得收藏。</p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_E001D0FA37FF1D7BF3FDE17F0C4BD7F3.jpg" src="https://img.nichaw.cn/photo/202010/20201007_E001D0FA37FF1D7BF3FDE17F0C4BD7F3.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_43002A7FD5D4D44AD5656F9E5F470DB1.jpg" src="https://img.nichaw.cn/photo/202010/20201007_43002A7FD5D4D44AD5656F9E5F470DB1.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_3F20D8C0893453E9E3CE5D9F3FCE2FCF.jpg" src="https://img.nichaw.cn/photo/202010/20201007_3F20D8C0893453E9E3CE5D9F3FCE2FCF.jpg?x-bce-process=style/i750"></p><p><img original-src="https://img.nichaw.cn/photo/202010/20201007_5D17F9210E41413DCB635BD362601A6C.jpg" src="https://img.nichaw.cn/photo/202010/20201007_5D17F9210E41413DCB635BD362601A6C.jpg?x-bce-process=style/i750"><img style="margin-bottom: 10px;" src="https://tuku.nichaw.cn/202207/21/a25e1a15482918115c4444aaf8056867.jpg?x-bce-process=style/artwork"><img src="https://img.nichaw.cn/fuwu/goumaixuzhi_002.jpg?x-bce-process=style/i750"></p><div style="margin: 15px 0;display: flex;align-items: center;justify-content: center;font-size:14px;"><div style="display: flex;justify-content: center;align-items: center;margin-right:10px;"><img src="https://img.nichaw.cn/img/gongan.png" ignore="" style="width: 22px;margin-right:5px;"><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61019002001673" target="_blank">公安网备</a></div><div style="display: flex;justify-content: center;align-items: center;margin-right:10px;"><img src="https://img.nichaw.cn/img/permit/gszz_ico2.png" ignore="" style="width: 22px;margin-right:5px;"><a href="https://img.nichaw.cn/fuwu/nc_zz.jpg?x-bce-process=style/i750" target="_blank">工商执照</a></div><div style="display: flex;justify-content: center;align-items: center;"><img src="https://img.nichaw.cn/img/permit/spzz_ico2.png" ignore="" style="width: 22px;margin-right:5px;"><a href="https://img.nichaw.cn/fuwu/nc_zz.jpg?x-bce-process=style/i750" target="_blank">食品许可证</a></div></div>\t\t\t\t',

      }
      this.commodityDetails = resData;
      this.commentLabelName = '商品评价（' + resData.commentCount + '）'
    }

  },
  mounted() {
    this.loadPageTitle();
    this.loadDefaultSearchKeywords();
    this.loadSearchSuggestKeywords();

  },
  created() {
    this.getCommodityDetail();
  }
}
</script>

<style>
a {
  color: #000000;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.main-container {
  width: 1200px;
  margin: 0 auto;
}

.float-link-container {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.nav-breadcrumb {
  margin: 10px 0;
}

.pro-intro {
  padding: 40px 40px 20px;
  box-sizing: border-box;
}

.g-b-r10 {
  border-radius: 10px;
}

.g-b-f {
  background: #fff;
}

#magnifier {
  position: relative;
  width: 450px;
  height: 450px;
  margin-bottom: 20px;

}

#magnifier img {
  width: auto;
  height: auto;
  max-height: 450px;
  max-width: 450px;
}

.pro-intro > .right {
  margin-left: 40px;
}

.main-intro {
  text-align: left;

}

.g-font22 {
  font-size: 22px;
}

.pro-intro .price {
  color: #ff5000;
}

.g-flex-cns {
  align-items: center;
}

.pro-intro .price::before {
  content: "¥";
  margin-right: 3px;
  font-size: 16px;
  font-weight: 400;
}

.g-m10-b {
  margin-bottom: 10px;
}

.g-m10-bt {
  margin: 10px 0;
}

.g-font16 {
  font-size: 16px;
}

.g-m15-b {
  margin-bottom: 15px;
}

.g-font30 {
  font-size: 30px;
}

.g-m15-b {
  margin-bottom: 15px;
}

.g-c-9 {
  color: #999;
}

.g-font14 {
  font-size: 14px;
}

#order-submit {
  max-width: 480px;
  height: 45px;
  line-height: 45px;
  background: #ff5722;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 0.03rem 0.24rem 0 #b5b4b4;
  cursor: pointer;
  user-select: none;
  margin-top: 50px;
}

#order-car {
  max-width: 480px;
  height: 45px;
  line-height: 45px;
  background: #1fab7a;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 0.03rem 0.24rem 0 #b5b4b4;
  cursor: pointer;
  user-select: none;
  margin-top: 50px;
}

.extra-info {
  margin: 25px 0;
}

.g-wrap {
  flex-flow: wrap;
}

.g-flex-item {
  flex: 1;
}

.g-flex {
  display: flex;
}

.g-c-7 {
  color: #777;
}

.extra-info li {
  margin: 0 15px 0 0;
}

.extra-info li::before {
  content: "*";
  margin-right: 3px;
  color: #e0620d;
  font-size: 12px;
}

.pro-details {
  margin: 30px 0;
  text-align: left;
}

.g-flex-bet {
  justify-content: space-between;
}

.so-box {
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}

.pro-details ul {
  padding: 30px 30px 10px;
  width: 300px;
  height: fit-content;
  box-sizing: border-box;
}

.pro-details ul > li {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.corr-img {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  background: #F5F5F5;
  margin-bottom: 5px;
}

.pro-details img {
  display: block;
  border: none;
  width: 100%;
}

.pro-details ul > li img:hover {
  transition: 0.3s all ease-in-out;
  transform: scale(1.05);
}

.pro-details ul > li h3 {
  font-weight: 400;
  font-size: 14px;
}

.g-b-r10 {
  border-radius: 10px;
}

.ncui-iconsbd {
  font-family: "nciconsbd";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.ncui-iconsbd > i {
  margin: 10px;
}

.so-input {
  width: 169px;
}

.so-input {
  flex: 1;
  height: 42px;
  width: 169px;
  padding: 0 10px;
  outline: none;
}

.g-bnt0 {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}

.so-bnt {
  background: #4caf50;
  width: 80px;
  cursor: pointer;
  text-align: center;
  color: #fff;
}

.corr-price {
  color: #ff5000;
}

.corr-price::before {
  content: "¥";
  margin-right: 5px;
  font-size: 16px;
  font-weight: 400;
}

.commodityTabs .content {
  padding: 30px 20px 0;
  box-sizing: border-box;
  font-size: 17px;
  color: #454545;
  text-align: justify;
  line-height: 1.85;
  border-top: 1px solid #f1f1f1;
}

.pro-details-cont {
  width: 880px;
  box-sizing: border-box;
  padding: 50px 65px 20px !important;
}

.commodityTabs .content img {
  max-width: 100%;
  width: auto;
  margin: 0 auto 22px;
  border-radius: 5px;
}

.pro-details-cont p {
  margin-bottom: 16px !important;
}

.pro-details-cont .comment-percent {
  width: 100%;
  float: left;
}

.pro-details-cont .percent-con {
  line-height: 110%;
  font-size: 45px;
  color: #e4393c;
  font-family: arial;
}

.pro-details-cont .percent-con span {
  font-size: 23px;
}

/*評論*/
.comment-item {
  zoom: 1;
  border-bottom: 1px solid #ddd;
}


</style>
